<script setup lang="ts">
  import { reactive, ref, computed, watch, onMounted } from 'vue';
  import { PageInventoryDetails } from '@/api/inventory-management/index';
  import { PageInventoryDetailsParam } from '@/api/inventory-management/types';
  import { Notification } from '@arco-design/web-vue';

  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      ellipsis: true,
      tooltip: true,
      width: 100,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      align: 'center',
      fixed: 'left',
    },
    {
      title: '巷道',
      dataIndex: 'rowNo',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '货位编码',
      dataIndex: 'shelvesCode',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '缓存箱编码',
      dataIndex: 'workBinCode',
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '质量编号/件号',
      dataIndex: 'qualityCode',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '条码',
      dataIndex: 'barCode',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '合格证号',
      dataIndex: 'mesCheckQualiticationId',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '型号',
      dataIndex: 'mProductNumber',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '库存数量',
      dataIndex: 'currentOnhandQty',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '移交数量',
      dataIndex: 'deliveryQty',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '接收数量',
      dataIndex: 'ReceiveQty',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '机型',
      dataIndex: 'productCode',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: 'AO编码',
      dataIndex: 'aoCode',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '入库时间',
      dataIndex: 'inventoryDate',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '入库人工号',
      dataIndex: 'InEmpCode',
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '所属单位',
      dataIndex: 'InvShop',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: 'AO号',
      dataIndex: 'AoNo',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '移交单位',
      dataIndex: 'deliveryShop',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '是否空箱',
      dataIndex: 'IsEmpty',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '操作盘',
      dataIndex: 'palletCode',
    },
  ];

  const rowSelection = reactive({
    type: 'checkbox' as 'checkbox' | 'radio',
    showCheckedAll: true,
  });
  const selectedKeys = ref<string[]>();
  const localTableData = ref<any>();
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);
  const pageSizeOptions = ref<number[]>([10, 30, 50, 100, 200, 300]);
  const selectedTableData = computed(() => {
    console.log(selectedKeys.value);
    if (selectedKeys.value && localTableData.value) {
      return localTableData.value.filter((item: any) =>
        selectedKeys.value?.includes(item.wmsDeliberyPlanId)
      );
    }
    return null;
  });
  const formValues = reactive({
    itemCode: '',
    qualityCode: '',
    barCode: '',
    batchNo: '',
    lotNo: '',
    inventoryStartDate: '',
    inventoryEndDate: '',
    InEmpCode: '',
    InvShop: '',
    rowNo: '',
    shelvesCode: '',
    isEmpty: '',
    workBinCode: '',
    currentPage: computed(() => pageNum.value),
    pageSize: computed(() => pageSize.value),
  });
  const queryData = computed<PageInventoryDetailsParam>(() => formValues);
  const rangeDate = ref<Date[]>([]);
  watch(rangeDate, () => {
    if (rangeDate.value && rangeDate.value.length >= 2) {
      formValues.inventoryStartDate = rangeDate.value[0].toString();
      formValues.inventoryEndDate = rangeDate.value[1].toString();
    }
  });
  async function handleSearch() {
    const response = await PageInventoryDetails(queryData.value);
    if (response.retCode === '200') {
      localTableData.value = response.responseBody.records;
      total.value = response.responseBody.total;
    } else {
      Notification.warning({ title: '提示', content: response.message });
    }
  }
  onMounted(() => {
    handleSearch();
  });
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  watch(
    () => [pageNum.value, pageSize.value],
    () => {
      handleSearch();
    }
  );
  function reset() {
    Object.keys(formValues).forEach((key) => {
      if (key !== 'currentPage' && key !== 'pageSize') {
        (formValues as Record<string, any>)[key] = '';
      }
    });
    rangeDate.value = [];
  }
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <a-input
        v-model="formValues.itemCode"
        placeholder="图号"
        size="large"
        allow-clear
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.qualityCode"
        placeholder="质量编号/件号"
        size="large"
        allow-clear
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.barCode"
        placeholder="条码"
        size="large"
        allow-clear
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.workBinCode"
        placeholder="缓存箱编号"
        size="large"
        allow-clear
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.batchNo"
        placeholder="批次号"
        size="large"
        allow-clear
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.lotNo"
        placeholder="架次"
        size="large"
        allow-clear
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.InvShop"
        placeholder="所属单位"
        size="large"
        allow-clear
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-input
        v-model="formValues.shelvesCode"
        placeholder="货位编码"
        size="large"
        allow-clear
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="6">
      <a-select
        v-model="formValues.rowNo"
        default-value=""
        placeholder="巷道"
        allow-clear
        @press-enter="handleSearch"
      >
        <a-option value="1">巷道1</a-option>
        <a-option value="2">巷道2</a-option>
        <a-option value="3">巷道3</a-option>
        <a-option value="4">巷道4</a-option>
        <a-option value="5">巷道5</a-option>
        <a-option value="6">巷道6</a-option>
      </a-select>
    </a-col>
    <a-col :span="6">
      <a-select
        v-model="formValues.isEmpty"
        default-value=""
        placeholder="是否空箱"
        allow-clear
        @press-enter="handleSearch"
      >
        <a-option value="Y">是</a-option>
        <a-option value="N">否</a-option>
      </a-select>
    </a-col>
    <a-col :span="6">
      <a-range-picker v-model:model-value="rangeDate" allow-clear />
    </a-col>
  </a-row>
  <div class="input-col">
    <a-space>
      <a-button type="primary" size="large" @click="handleSearch">
        查询
      </a-button>
      <a-button size="large" @click="reset">重置</a-button>
    </a-space>
  </div>
  <a-table
    v-model:selected-keys="selectedKeys"
    :stripe="true"
    :hoverable="false"
    class="top-table"
    :pagination="false"
    :columns="columns"
    :data="localTableData"
    :row-selection="rowSelection"
    row-key="wmsDeliberyPlanId"
    column-resizable
    :scroll="{ y: 410 }"
  >
    <template #id="{ record }">{{
      localTableData.indexOf(record) + 1
    }}</template>
  </a-table>

  <div class="page-position">
    <a-pagination
      :total="total"
      :current="pageNum"
      :page-size="pageSize"
      :page-size-options="pageSizeOptions"
      show-total
      show-jumper
      show-page-size
      @change="change"
      @update:page-size="changeSize"
    />
  </div>
</template>

<style scoped>
  span {
    margin-bottom: 16px;
  }
  .top-table {
    white-space: nowrap;
    z-index: 1;
    margin-top: 10px;
  }
  .page-position {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .input-col {
    margin-top: 10px;
  }
</style>
